<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
    <!-- 引入react核心库 -->
    <script src="../../../../node_modules/react/umd/react.development.js"></script>
    <!-- 2. 引入react-dom 用于支持react操作dom -->
    <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../../../../node_modules/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="div">11</div>
</body>
<script type="text/babel">
    console.log('react',React,ReactDOM)
    // 创建react 元素
 /*     参数1: 元素名称
        参数2: 元素属性
        参数3: 元素的子节点 */
    let title = React.createElement('h1', null, '你好React')

    let all = React.createElement('div',{className:'first'},
        React.createElement('h2',{className:'aa',style:'color=red'},'中奖名单',
            React.createElement('ul',null,
                React.createElement('li',null,'2.ljl'),
                React.createElement('li',{ onClick: function() {alert('李四')} },'3.ljl')
            )
        )
    )
        
    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById('div'))
    // 渲染到页面中
    root.render(title)
    root.render(all)
</script>
</html>